<template>
  <div class="attr-list">
    <CommonAttr />
    <px-form>
      <px-form-item label="tip">
        <px-input
          v-model="
            //@ts-ignores
            curComponent.propValue.tip
          "
        />
      </px-form-item>
      <p>增加项目</p>
      <div v-for="(e, i) in (curComponent.propValue as Record<string, any>).contentList" :key="i">
        <px-form-item label="颜色">
          <px-color-picker v-model="e.color" show-alpha />
        </px-form-item>
        <px-form-item label="名称">
          <px-input v-model.number="e.name" placeholder="请输入名称" />
        </px-form-item>
        <px-form-item label="绑定图层">
          <px-select v-model.number="e.layer" filterable placeholder="请选择绑定图层">
            <px-option v-for="(item, index) in filterData" :key="index" :label="dealName(item)" :value="item.id" />
          </px-select>
        </px-form-item>
        <px-form-item>
          <px-button @click.prevent="deleteData((curComponent.propValue as Record<string, any>).contentList, i)">Delete</px-button>
        </px-form-item>
      </div>
      <px-button style="margin-top: 10px" @click="addAttr((curComponent.propValue as Record<string, any>).contentList)">添加属性</px-button>
    </px-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, inject } from "vue";
import { storeToRefs } from "pinia";
import { cloneDeep } from "@pureadmin/utils";

import { useComponent } from "@visual/stores";
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";

const componentStore = useComponent();

const { curComponent, componentData } = storeToRefs(componentStore);

const flattenTreeData = inject("curTreeData", ref({}));

const filterData = computed(() => {
  let filterDatas = componentData.value.filter(item => item.component !== "ColorMarking");
  let [group, comps] = partitionArrayByValue(cloneDeep(filterDatas), "component", "Group");

  group.forEach(item => {
    item.propValue.components.forEach(comp => {
      comp.groupName = item.label;
      comps.push(comp);
    });
  });
  return comps;
});

function dealName(comp) {
  if (flattenTreeData.value && comp?.propValue?.routerKey) {
    const curTreeData = flattenTreeData.value[comp.propValue.routerKey];
    if (curTreeData) {
      const { type, code, className: name } = curTreeData;
      if (type === "EQP") {
        let name = replaceCharWithNewLine(comp.propValue.groupName) || code;
        return comp.groupName ? `${comp.groupName}/${name}` : name;
      }
    }
  }
  if (comp?.propValue?.type === "EQP") {
    let name = replaceCharWithNewLine(comp.propValue.groupName || comp.propValue.routerKey || comp.propValue.tip);
    return comp.groupName ? `${comp.groupName}/${name}/${comp.component}` : name;
  }
  if (comp.component === "VImage") return comp.groupName ? `${comp.groupName}/${comp.propValue.name}/${comp.component}` : comp.propValue.name;
  let name = replaceCharWithNewLine(comp.propValue.tip || comp.propValue.title);
  return comp.groupName ? `${comp.groupName}/${name}/${comp.component}` : comp.component;
}
function replaceCharWithNewLine(str, charToReplace = ",") {
  if (!str) return str;
  try {
    return str.replace(new RegExp(charToReplace, "g"), "\n");
  } catch (e) {
    return str;
  }
}

function partitionArrayByValue(array, key, value) {
  // 初始化两个空数组，用于存储结果
  const equals = [];
  const notEquals = [];

  // 遍历数组，根据条件分配到相应的数组中
  array.forEach(item => {
    if (item[key] === value) {
      equals.push(item);
    } else {
      notEquals.push(item);
    }
  });

  // 返回包含两个数组的对象
  return [equals, notEquals];
}

function deleteData(params, index) {
  params.splice(index, 1);
}
function addAttr(params) {
  params.push({ color: "", name: "", layer: "" });
}
</script>
